<template>
  <div id="weather">
    <div class="wapper">
      <!-- <el-table :data="tableData">
        <el-table-column prop="ymd" label="时间"> </el-table-column>
        <el-table-column prop="high" label="最高温"> </el-table-column>
        <el-table-column prop="low" label="最低温"> </el-table-column>
        <el-table-column prop="type" label="气象情况"> </el-table-column>
      </el-table> -->
      <div v-for="item in tableData" :key="item.index">
        <div>{{ item.ymd }}</div>
        <div>{{ item.type }}</div>
        <div>{{ item.high }}</div>
        <div>{{ item.low }}</div>
        <div>{{ item.fl }}</div>
        <div>{{ item.notice }}</div>
      </div>
    </div>
    <div class="txtarea" style="position:absolute;top:60vh;left:18vw;">
      <div class="input">
        <el-input v-model="inputData" placeholder="请输入内容"></el-input>
        <el-button
          style="position:relative;float:left;margin:1vw"
          round
          @click="getCityCode()"
          >Submit
        </el-button>
        <el-button
          style="position:relative;float:left;margin:1vw"
          round
          @click="onGetData()"
          >Get
        </el-button>
        <div>
          {{ city }}
        </div>
        <div>
          {{ time }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  name: 'weather',
  components: { qs },
  data () {
    return {
      time: null,
      city: { code: '', name: '' },
      inputData: '',
      redata: {},
      tableData: [
        {
          aqi: 28,
          date: '12',
          fl: '2级',
          fx: '南风',
          high: '高温 21℃',
          low: '低温 12℃',
          notice: '阴晴之间，谨防紫外线侵扰',
          sunrise: '04:43',
          sunset: '19:04',
          type: '多云',
          week: '星期三',
          ymd: '2021-06-12'
        }
      ],
      reloadFlag: true
    }
  },
  mounted () {
    this.initData()
    let date = new Date()
    this.time = parseInt(date.getTime() / 1000) + date.getTimezoneOffset() * 60
    setTimeout(() => {
      this.onGetData()
    }, 1000)
  },
  methods: {
    async initData () {
      await this.getIpPosition().then(() => {
        console.log(this.city)
        this.inputData = this.city.name
        this.getCityCode()
      })
    },
    onGetData () {
      let url = 'http://t.weather.itboy.net/api/weather/city/'
      // 天气预报API
      this.$axios.get(url + this.city.code).then(res => {
        if (res) {
          this.redata = res.data
          let result = JSON.stringify(res.data.data.forecast)
          this.tableData = JSON.parse(result)
          console.log(this.tableData)
          this.$store.dispatch('setWeather', [
            { cityCode: this.city.code, data: res.data }
          ])
        }
      })
    },
    getCityCode () {
      let url = 'http://localhost:8444/city_code?' + 'city='
      let parems = this.inputData
      this.$axios.get(url + encodeURIComponent(parems)).then(res => {
        if (res) {
          let result = res.data
          this.city.code = result.dataStr[1]
          this.city.name = result.dataStr[0]
          console.log(this.city)
          this.reloadOfPart()
        }
      })
    },
    async getIpPosition () {
      let params = {
        key: '142566f6064108a30b1e26b72cc901a2'
      }
      let result = await new Promise((resolve, reject) => {
        this.$axios
          .get('https://restapi.amap.com/v3/ip?' + qs.stringify(params)) // 高德地图IP查询API
          .then(res => {
            if (res) {
              // let result = res.data.city
              resolve(res.data)
            }
          })
          .catch(error => {
            console.log(error)
          })
      })
      this.city.name = result.city
        .slice(0, result.city.length - 1)
        .split(' ')[0] // 仅为简单处理
      console.log(result.city.slice(0, result.city.length - 1).split(' ')[0])
    },
    reloadOfPart () {
      this.reloadFlag = false
      this.$nextTick(() => {
        this.reloadFlag = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wapper {
  // width: 70vw;
  height: 50vh;
  position: absolute;
  top: 5vh;
  left: 18vw;
  div {
    position: relative;
    float: left;
  }
}
.txtarea {
  width: 70vw;
  height: 30vh;
  left: 6vw;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  border: 1px solid #ccc;
  div {
    margin: 1vh;
  }
  .input {
    width: 60vw;
  }
}
</style>
